<template>
  <div>
    <!-- ST css files -->
    <remote-css v-if="stylex" :href="`/PublicMob/css/dist/style.css?v=${TS}`"></remote-css>
    <!-- ED css files -->

    <!-- ST js files -->
    <remote-sy-js v-if="libMin" :src="`${wx.getExtConfigSync().appApiUrl?wx.getExtConfigSync().appApiUrl:''}/PublicMob/js/dist/lib-min.js?v=${TS}`"></remote-sy-js>
    <remote-js v-if="layzr" :src="`${wx.getExtConfigSync().appApiUrl?wx.getExtConfigSync().appApiUrl:''}/PublicMob/plugins/layzr/layzr.min.js?v=${TS}`"></remote-js>
    <remote-js v-if="swipe" :src="`${wx.getExtConfigSync().appApiUrl?wx.getExtConfigSync().appApiUrl:''}/PublicMob/plugins/swipe/swipe.js?v=${TS}`"></remote-js>
    <!-- ST 腾讯地图api -->
    <remote-js v-if="map&&isJsMapReady" :src="`https://map.qq.com/api/js?v=2.exp&key=${key}`"></remote-js>
    <remote-js v-if="map&&isJsMapReady" :src="`https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js`"></remote-js>
    <!-- ED 腾讯地图api -->
    <!-- ST 高德地图api -->
    <remote-js v-if="map&&isJsMapReady" :src="`https://webapi.amap.com/maps?v=1.4.3&key=552f0986c98fa36d395d95d52f3e9706`" ></remote-js>
    <!-- ED 高德地图api -->
    <!-- ED js files -->
    <remote-js v-if="main&&isJsMainReady" :src="`/PublicMob/js/dist/main-v.js?v=${TS}`"></remote-js>
    <remote-js v-if="indexComm&&isJsIndexCommReady" :src="`/PublicMob/js/dist/Shop/index_comm-v.js?v=${TS}`"></remote-js>

    <!-- ST sku选择，加入购物车 cpt -->
    <sku-dialog :visible.sync="god.skuDialogVisible" :itemId="god.itemId"></sku-dialog>
    <!-- ED sku选择，加入购物车 cpt -->

  </div>
</template>

<script>
import Vue from 'vue'
import small from '@/smallapp/small'

/**
 * render diy html resource handler cpt
 * @author gaogm
 */

import skuDialog from '@/views/item/components/skuDialog'
const debug = process.env.NODE_ENV !== 'production'

export default Vue.extend({
  name: 'diy-cpt',
  props: {
    /**
     * 是否引入 css style
     */
    stylex: {
      type: Boolean,
      default: false
    },
    /**
     * 是否引入 js libMin
     */
    libMin: {
      type: Boolean,
      default: false
    },
    /**
     * 是否引入 js layzr
     */
    layzr: {
      type: Boolean,
      default: false
    },
    /**
     * 是否引入 js swipe
     */
    swipe: {
      type: Boolean,
      default: false
    },
    /**
     * 是否引入 js main
     */
    main: {
      type: Boolean,
      default: false
    },
    /**
     * 是否引入 js indexComm
     */
    indexComm: {
      type: Boolean,
      default: false
    },
    /**
     * 是否引入 js map
     */
    map: {
      type: Boolean,
      default: false
    }
  },
  components: {
    'remote-css': {
      render(createElement) {
        return createElement('link', { attrs: { rel: 'stylesheet', href: this.href }})
      },
      props: {
        href: { type: String, required: true }
      }
    },
    'remote-sy-js': {
      render(createElement) {
        return createElement('script', { attrs: { type: 'text/javascript', src: this.src }})
      },
      props: {
        src: { type: String, required: true }
      }
    },
    'remote-js': {
      render(createElement) {
        return createElement('script', { attrs: { type: 'text/javascript', src: this.src, defer: true }})
      },
      props: {
        src: { type: String, required: true }
      }
    },
    skuDialog
  },
  data() {
    return {
      TS: 'v1',
      isJsMainReady: false,
      isJsIndexCommReady: false,
      isJsMapReady: false,
      mLayzrTimer: '',
      god: {
        skuDialogVisible: false,
        itemId: null
      },
      key: ''
    }
  },
  created() {
    this.key = small.wxCache('tencentMapKey')
  },
  mounted() {
    this.key = small.wxCache('tencentMapKey')
  },
  methods: {
    /**
     * start load layzr resoucre
     */
    startLayzr() {
      this.mLayzrTimer = setInterval(this._initLayzr, 500)
    },
    /**
     * start load Main resoucre
     */
    startLoadJsMain() {
      this.isJsMainReady = true
    },
    /**
     * start load indexComm resoucre
     */
    startLoadJsIndexComm() {
      this.isJsIndexCommReady = true
    },
    /**
     * start load map resoucre
     */
    startLoadJsMap() {
      this.isJsMapReady = true
    },
    _initLayzr() {
      console.debug('exe _initLayzr', this.layzr)
      try {
        if (this.layzr && Layzr) {
          clearInterval(this.mLayzrTimer)
          this.$nextTick(() => {
            new Layzr({
              container: null,
              selector: '.lazyload',
              attr: 'data-original',
              bgAttr: 'data-layzr-bg',
              threshold: 600
            })

            this._initAddCart()
          })
        }
      } catch (error) {
        if (!debug) {
          console.error('QB=>', error)
        }
      }
    },
    _initAddCart() {
      console.debug('exe _initAddCart')
      const that = this
      $(document).on('click', '.J-goodsAddCart', function() {
        const id = $(this).data('id')
        that.god.itemId = id
        that.god.skuDialogVisible = true
        return false
      })
    }
  }
})
</script>

<style lang="scss">
</style>
